import { Search } from '@element-plus/icons-vue';
import { ElTooltip } from 'element-plus';
import { trim } from 'lodash-es';
import { MciInput } from '../Input';

export const MciSearch = defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    tooltip: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const str = ref('');

    watch(
      () => props.modelValue,
      (val) => {
        str.value = val;
      },
      { immediate: true }
    );

    watch(str, (val) => {
      // 搜索内容去掉前后空格
      emit('update:modelValue', trim(val));
    });

    return {
      str
    };
  },
  render() {
    return (
      <div class="mci-search w-full">
        <ElTooltip disabled={!this.tooltip} content={this.$attrs.placeholder + ''}>
          <MciInput v-model={this.str} prefix-icon={Search} clearable {...this.$attrs}></MciInput>
        </ElTooltip>
      </div>
    );
  }
});
